import React, { memo, useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { isEmptyObject } from '@/utils'

import { HomeWrapper } from '@/views/home/style'
import HomeBanner from '@/views/home/c-cpns/home-banner'
import { fetchHomeDataAction } from '@/store/modules/home'
import HomeSectionV1 from '@/views/home/c-cpns/home-section-v1'
import HomeSectionV2 from '@/views/home/c-cpns/home-section-v2'
import HomeLongFor from '@/views/home/c-cpns/home-longfor'
import HomeSectionV3 from '@/views/home/c-cpns/home-sectionv3'
import { changeHeaderConfigAction } from '@/store/modules/main'

const Home = memo(() => {
  // 从redux 中获取数据
  const {
    goodPriceInfo,
    highScoreInfo,
    discountInfo,
    hotRecommendInfo,
    longForInfo,
    homePlusInfo
  } = useSelector(state => {
    return {
      goodPriceInfo: state.home.goodPriceInfo,
      highScoreInfo: state.home.highScoreInfo,
      discountInfo: state.home.discountInfo,
      hotRecommendInfo: state.home.hotRecommendInfo,
      longForInfo: state.home.longForInfo,
      homePlusInfo: state.home.homePlusInfo,
    }
  }, shallowEqual); // shallowEqual 浅拷贝
  /** 派发异步的事件: 发送网络请求 */
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(fetchHomeDataAction())
    //   顶部搜索 定位样式 动态改变
    dispatch(changeHeaderConfigAction({isFixed: true, isHome: true}))
  }, [dispatch]);
  return (
    <HomeWrapper>
      {/*轮播图*/ }
      <HomeBanner/>
      <div className="content">
        { isEmptyObject(goodPriceInfo) && <HomeSectionV1 infoData={ goodPriceInfo }/> }
        { isEmptyObject(highScoreInfo) && <HomeSectionV1 infoData={ highScoreInfo }></HomeSectionV1> }
        { isEmptyObject(discountInfo) && <HomeSectionV2 infoData={ discountInfo }></HomeSectionV2> }
        { isEmptyObject(hotRecommendInfo) && <HomeSectionV2 infoData={ hotRecommendInfo }></HomeSectionV2> }
        { isEmptyObject(longForInfo) && <HomeLongFor infoData={ longForInfo }></HomeLongFor> }
        { isEmptyObject(homePlusInfo) && <HomeSectionV3 infoData={ homePlusInfo }></HomeSectionV3> }
      </div>
    </HomeWrapper>
  );
});

export default Home;
